<template>
  <basic-container>
    <avue-form
      class="sysConfig"
      v-model="form"
      ref="form"
      :option="option"
      @submit="submit"
    >
      <template slot="menuForm">
        <el-button icon="el-icon-circle-close" @click="close">取消</el-button>
      </template>
    </avue-form>
    <div v-if="this.detail" style="text-align: center; padding: 30px">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-edit"
        @click="detail = false"
        >编辑</el-button
      >
      <el-button size="small" icon="el-icon-refresh" @click="close"
        >刷新</el-button
      >
    </div>
  </basic-container>
</template>

<script>
import { getDetail, submit } from "@/api/system/config";
import { validatenum } from "@/util/validate";
export default {
  data() {
    return {
      form: {},
      detail: true,
      dataList: [],
    };
  },
  computed: {
    option() {
      var validateInteger = (rule, value, callback) => {
        if (validatenum(value, 2) || value <= 0) {
          callback("请输入正整数");
        } else {
          callback();
        }
      };
      return {
        labelWidth: 200,
        menuBtn: !this.detail,
        detail: this.detail,
        emptyBtn: false,
        column: [
          {
            label: "运单是否支持拆单",
            prop: "waybill_supports_splitting",
            type: "radio",
            dicData: [
              { label: "是", value: "是" },
              { label: "否", value: "否" },
            ],
            rules: [
              {
                required: true,
                message: "请选择运单是否支持拆单",
                trigger: "change",
              },
            ],
          },
          {
            label: "询价单分配承运商最大数",
            prop: "Maximum_number_of_carriers",
            rules: [
              {
                required: true,
                message: "请输入询价单分配承运商最大数",
                trigger: "blur",
              },
              {
                validator: validateInteger,
                trigger: "blur",
              },
            ],
          },
          {
            label: "询价响应截止日期",
            prop: "closing_date",
            append: "小时",
            rules: [
              {
                required: true,
                message: "请输入询价响应截止日期",
                trigger: "blur",
              },
              {
                validator: validateInteger,
                trigger: "blur",
              },
            ],
          },
          {
            label: "外贸询价单最大船公司数",
            prop: "Maximum_number_of_shipping",
            rules: [
              {
                required: true,
                message: "请输入外贸询价单最大船公司数",
                trigger: "blur",
              },
              {
                validator: validateInteger,
                trigger: "blur",
              },
            ],
          },
          {
            label: "询价有效期",
            prop: "Inquiry_validity",
            append: "小时",
            rules: [
              {
                required: true,
                message: "请输入询价有效期",
                trigger: "blur",
              },
              {
                validator: validateInteger,
                trigger: "blur",
              },
            ],
          },
          {
            label: "询报价邮件标题",
            prop: "email_title",
            rules: [
              {
                required: true,
                message: "请输入询报价邮件标题",
                trigger: "blur",
              },
            ],
          },
          {
            label: "询报价邮件正文",
            prop: "email_msg",
            component: "AvueUeditor",
            options: {
              customConfig: {
                menus: [
                  "head", // 标题
                  "bold", // 粗体
                  "fontSize", // 字号
                  "fontName", // 字体
                  "italic", // 斜体
                  "underline", // 下划线
                  "strikeThrough", // 删除线
                  "foreColor", // 文字颜色
                  "backColor", // 背景颜色
                  "link", // 插入链接
                  "list", // 列表
                  "justify", // 对齐方式
                  "quote", // 引用
                  // "emoticon", // 表情
                  // "image", // 插入图片
                  "table", // 表格
                  // "video", // 插入视频
                  // "code", // 插入代码
                  "undo", // 撤销
                  "redo", // 重复
                ],
              },
            },
            hide: true,
            minRows: 6,
            span: 24,
          },
          {
            label: "承运商组别",
            prop: "carrierGroup",
            type: "dynamic",
            span: 12,
            rules: [
              {
                required: true,
                message: "请添加承运商组别",
                trigger: "change",
              },
            ],
            children: {
              align: "center",
              headerAlign: "center",
              rowAdd: (done) => {
                done();
              },
              rowDel: (row, done) => {
                done();
              },
              column: [
                {
                  label: "名称",
                  prop: "name",
                  formslot: true,
                },
              ],
            },
          },
        ],
      };
    },
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      getDetail().then((res) => {
        if (res.data.code === 200 && res.data.success) {
          let data = res.data.data;
          this.dataList = data;
          let form = {};
          data.forEach((item) => {
            if (item.dictKey === "carrierGroup") {
              form[item.dictKey] =
                item.dictValue === "无" ? [] : JSON.parse(item.dictValue);
            } else {
              form[item.dictKey] = item.dictValue;
            }
          });
          this.form = form;
        }
      });
    },
    submit(form, done) {
      const submitData = this.dataList.map((item) => {
        item.dictValue =
          item.dictKey === "carrierGroup"
            ? JSON.stringify(this.form[item.dictKey])
            : this.form[item.dictKey];
        return item;
      });
      submit(submitData)
        .then((res) => {
          if (res.data.code === 200 && res.data.success) {
            this.close();
            done();
          }
        })
        .catch(() => {
          done();
        });
    },
    close() {
      this.$refs.form.resetForm();
      this.getDetail();
      this.detail = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.sysConfig {
  /deep/ ._wangEditor_btn_sourcecode {
    display: none;
  }
}
</style>
